<template>
	<z-paging ref="pagingRef" v-model="state.orderList" @query="queryList">
		<template #top>
			<hx-navbar title="我的订单"></hx-navbar>
			<view class="order-search"><u-search placeholder="搜索我的订单" v-model="state.queryParams.keyword"
					:show-action="false" @custom="onSearch" @search="onSearch"></u-search></view>
			<u-tabs :list="orderStatusList" v-model="state.tabCurrent" @change="changeTab"></u-tabs>
		</template>

		<view class="order-list-container">
			<view class="order-list-warp" v-for="(order, index) in state.orderList" :key="index"
				@click="toOrderDetail(order.id)">
				<view class="order-list-header">
					<view class="order-no">
						{{ order.orderNo }}
					</view>
					<view class="order-status">
						<view style="font-size: 26rpx;" v-if="order.deliveryWay == '2' && order.status == '3'">待自提
						</view>
						<dict-tag v-else :options="order_status" :value="order.status"></dict-tag>
					</view>
				</view>
				<view class="order-item" v-for="(item, itemIndex) in order.orderItemList" :key="itemIndex">
					<image :src="item.picUrl" />
					<view class="right">
						<view class="goods-title u-line-2"> {{ item.spuName }} </view>
						<view class="goods-spec" v-if="item.specsInfo">{{ item.specsInfo }}</view>
						<view class="goods-price">
							<view class="text-price" style="color: red"> {{ item.salesPrice }} </view>
							<view class="goods-quantity">x{{ item.buyQuantity }} </view>
						</view>
						<view v-if="order.payStatus == '1'">
							<u-button class="refunds-btn" size="mini" shape="circle"
								v-if="item.status == '1' || item.status == '2'"
								@click="toRefunds(item.id, item.status)">申请售后</u-button>
							<dict-tag style="display: flex;justify-content: flex-end;" v-else :options="order_item_status" :value="item.status"></dict-tag>
						</view>
					</view>
				</view>
				<view class="order-price">
					<text style="color: #909090" class="u-padding-right-10">共{{ order.orderItemList.length }}件 </text>
					<text class="text-price u-padding-left-10 price">{{ order.paymentPrice }}</text>
				</view>
				<view class="order-operate">
					<order-operation :orderInfo="order" buttonSize="mini" @orderDel="orderDel($event, index)"
						@orderReceiver="orderReceiver($event, index)"
						@orderCancel="orderCancel($event, index)"></order-operation>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getPage } from '@/api/order/orderInfo';
import { useDict } from '@/utils/dict';

import OrderOperation from '@/components/order-operation/index.vue';
interface State {
	queryParams: {
		name: string;
		status: string;
		appraiseStatus: string;
		keyword: string;
	};
	tabCurrent: number;
	orderList: Array<any>;
}
const { order_item_status, order_status } = useDict('order_item_status', 'order_status');

// 定义变量
const pagingRef = ref<ZPagingInstance>();
const orderStatusList = ref([
	{
		name: '全部订单',
	},
	{
		name: '待付款',
	},
	{
		name: '待发货',
	},
	{
		name: '待收货',
	},
	{
		name: '待评价',
	},
]);
const state = reactive<State>({
	queryParams: {
		name: '',
		status: '0',
		appraiseStatus: '',
		keyword: '',
	},
	tabCurrent: 0,
	orderList: [],
});
onLoad((options) => {
	if (options?.status) {
		state.tabCurrent = options.status;
		state.queryParams.status = options.status;
	}
});
const onSearch = () => {
	pagingRef.value?.reload();
};
const queryList: ZPagingEvent.Query = (pageNo: number, pageSize: number) => {
	getPage({
		current: pageNo,
		size: pageSize,
		status: state.queryParams.status != '0' ? state.queryParams.status : '',
		appraiseStatus: state.queryParams.appraiseStatus,
		desc: 'create_time',
		keyword: state.queryParams.keyword,
	}).then((response) => {
		pagingRef.value?.complete(response.data.records);
	});
};
const toOrderDetail = (orderId: string) => {
	uni.$hxRouter.push({url:'/pages/order/order-detail/index?id=' + orderId});
};

const changeTab = (index: number) => {
	state.queryParams.status = '' + index;
	state.queryParams.appraiseStatus = '';
	if (index == 4) {
		state.queryParams.appraiseStatus = '0';
	}
	pagingRef.value?.reload();
};
const orderDel = (row: any, index: number) => {
	state.orderList.splice(index, 1);
};
const orderReceiver = (row: any, index: number) => {
	pagingRef.value?.reload();
};
const orderCancel = (row: any, index: number) => {
	pagingRef.value?.reload();
};
// 跳转到退款申请页面
const toRefunds = (orderItemId: string, status: string) => {
	if (status == '1' || status == '2') {
		uni.$hxRouter.push({url:'/pages/order/order-refunds/submit?orderItemId=' + orderItemId});
	}
};
</script>

<style lang="scss">
.order-list-container {
	padding: 20rpx;

	.order-list-warp {
		padding: 20rpx;
		border-radius: 10rpx;
		background-color: #fff;
		margin-bottom: 20rpx;

		.order-list-header {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.order-no {
				display: flex;

				.name {
					font-size: 14px;
					font-weight: 700;
				}
			}
		}

		.order-item {
			display: flex;
			padding-top: 10rpx;

			image {
				width: 160rpx;
				flex: 0 0 160rpx;
				height: 160rpx;
				border-radius: 8rpx;
			}

			.right {
				flex: 1 0 0%;
				height: 100%;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				overflow: hidden;

				.goods-title {
					font-size: 28rpx;
				}

				.goods-spec {
					padding-top: 10rpx;
					font-size: 24rpx;
					color: #909090;
				}

				.goods-price {
					padding-top: 10rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.refunds-btn {
					float: right;
					margin-top: 10rpx;
				}
			}
		}

		.order-price {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding: 20rpx 0;

			.price {
				font-weight: 500;
				font-size: 32rpx;
				color: red;
			}
		}

		.order-operate {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}
}

.order-search {
	background-color: #fff;
	padding: 20rpx;
}
</style>
